<template>
    <u-popup :show="show" mode="center" @close="close()">
        <view class="">
            <image :src="path" mode="widthFix"></image>
            <l-painter :board="poster" isCanvasToTempFilePath @success="path = $event" hidden v-if="show"
                ref="painter" />

            <!-- path-type="http://wx.sdljk.com/upload/20240418/7e911eb5b5f0a5ff889979b1c180d326.png" -->
        </view>
        <view class="buts">长按图片保存</view>
    </u-popup>
</template>
<script>
    /**
     * PosterPopup 海报生成弹框 
     */
    export default {
        data() {
            return {
                posterInfo: {
                    
                },
                show: false,
                path: '',

            };
        },
        watch: {
            posterInfo: {
                immediate: true,
                deep: true,
                handler(a) {

                }
            }
        },
        computed: {
            poster() {
                
                let { 
                    // 标题
                    title, 
                    // 图片
                    image, 
                    // 原价
                    originPrice,
                    // 现价
                    price,
                    
                    
                   
                    
                    pricePrefix = '￥',
                    priceSuffix = '',
                    
                    originPricePrefix = '￥',
                    originPriceSuffix = '',
                    
                    // 二维码地址
                    qrcode
                } = this.posterInfo
                
                // test 
                // image = "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
                
                return {
                    css: {
                        width: "750rpx",
                        // paddingBottom: "40rpx",
                        // background: "linear-gradient(,#000 0%, #ff5000 100%)"
                    },
                    views: [{
                        css: {
                            padding: "32rpx",
                            boxSizing: "border-box",
                            background: "#fff",
                            borderRadius: "16rpx",
                            // width: "670rpx",
                            // boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
                        },
                        views: [
                            {
                                src: image,
                                type: "image",
                                css: {
                                    objectFit: "cover",
                                    objectPosition: "50% 50%",
                                    width: "686rpx",
                                    height: "606rpx"
                                },
                            }, {
                                css: {
                                    // marginTop: "32rpx",
                                    color: "#FF0000",
                                    fontWeight: "bold",
                                    fontSize: "28rpx",
                                    lineHeight: "1em",
                                    marginTop: "30rpx",
                                    padding: "0 30rpx",
                                    display: 'flex'
                                },
                                views: [{
                                    text: "",
                                    type: "view",
                                    css: {
                                        flex: "1",
                                    },
                                    views: [
                                        {
                                            type: "view",
                                            css: {
                                                
                                            },
                                            views: [
                                                {
                                                    text: title,
                                                    type: "text",
                                                    css: {
                                                        verticalAlign: "bottom",
                                                        color: '#000000',
                                                        fontSize: "40rpx"
                                                    },
                                                }
                                            ]
                                        }, {
                                            text: "",
                                            type: "view",
                                            css: {
                                                verticalAlign: "bottom",
                                                marginTop: '15rpx',
                                            },
                                            views: [
                                                {
                                                    text: pricePrefix,
                                                    type: "text",
                                                    css: {
                                                        verticalAlign: "bottom",
                                                        fontSize: "28rpx"
                                                    },
                                                }, {
                                                    text: price,
                                                    type: "text",
                                                    css: {
                                                        verticalAlign: "bottom",
                                                        fontSize: "58rpx"
                                                    },
                                                }, {
                                                    text: priceSuffix,
                                                    type: "text",
                                                    css: {
                                                        verticalAlign: "bottom",
                                                        fontSize: "28rpx"
                                                    },
                                                }, {
                                                    text: uni.$u.func.isNotNull(originPrice) ? this.$text(originPricePrefix) + originPrice + this.$text(originPriceSuffix): '',
                                                    type: "text",
                                                    css: {
                                                        verticalAlign: "bottom",
                                                        paddingLeft: "10rpx",
                                                        fontWeight: "normal",
                                                        textDecoration: "line-through",
                                                        color: "#999999",
                                                        fontSize: "28rpx"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                },{
                                    text: "",
                                    type: "view",
                                    css: {
                                        width: "128rpx",
                                        height: "128rpx",
                                    },
                                    views: [
                                         {
                                            text: qrcode,
                                            type: "qrcode",
                                            css: {
                                                marginTop: "10rpx",
                                                width: "128rpx",
                                                height: "128rpx",
                                                color: '#000000'
                                            },
                                        
                                        }
                                    ]
                                }],

                                type: "view"
                            }
                        ],
                        type: "view"
                    }]
                }
            }
        },
        onLoad() {

        },
        methods: {
            open(data) {
                Object.assign(this.posterInfo, data)
                this.show = !this.show
            },
            close() {
                this.show = !this.show
            },
            confirm() {
                // console.log(this.path,'path');
                this.$refs.painter.canvasToTempFilePathSync({
                    fileType: "jpg",
                    // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
                    pathType: 'url',
                    quality: 1,
                    success: (res) => {
                        console.log(res.tempFilePath, 'aa');
                        // 非H5 保存到相册
                        // H5 提示用户长按图另存
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: function() {
                                console.log('save success');
                            }
                        });
                    },
                });
            }
        }

    };
</script>
<style lang="scss" scoped>
    v-deep .u-modal__content {
        margin: 0;
        padding: 0 !important;
    }

    .buts {
        text-align: center;
        margin-bottom: 20rpx;
        // color: #;
    }
</style>